<template>
  <div class="slide-banner">
    <div class="banner-wrapper">
      <div class="slide-banner-wrapper" ref="wrapper">
        <div class="slide-banner-content">
          <div
            v-for="slider in sliders"
            class="slide-page"
            :key="slider"
          >
            <a :href="slider.link" class="item-link">
              <img :src="slider.pic" alt="" class="item-link-img">
            </a>
          </div>
        </div>
      </div>
      <div class="dots-wrapper">
        <span
          class="dot"
          v-for="(slider, index) in sliders"
          :key="slider.id"
          :class="{'active': currentPageIndex === index}"></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { SlideProp } from '@/views/recommend/index.vue'
import { defineComponent, PropType } from 'vue'
import useSliderHook from './useSliderHook'
export default defineComponent({
    props: {
      sliders: {
        type: Array as PropType<SlideProp[]>,
        default: () => []
      }
    },
    setup () {
        const { wrapper, currentPageIndex } = useSliderHook()
        console.log('wrapper.value', wrapper)
        return {
          currentPageIndex,
          wrapper
        }
    }
})
</script>

<style lang="scss">
.slide-banner {
  height: 150px;
  .banner-wrapper {
    position: relative;
    height: 100%;
    .slide-banner-wrapper {
      height: 100%;
      min-height: 1px;
      overflow: hidden;
      .slide-banner-content {
        height: 100%;
        white-space: nowrap;
        font-size: 0;
        .slide-page {
          display: inline-block;
          height: 100%;
          width: 100%;
          line-height: 100%;
          text-align: center;
          font-size: 26px;
        }
        .item-link {
          display: block;
          height: 100%;
          .item-link-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
  .dots-wrapper {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    .dot {
      display: inline-block;
      margin: 0 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #eee;
      &.active {
        width: 20px;
        border-radius: 5px;
      }
    }
  }
}
</style>
